<template>
  <el-dialog
      v-model="centerDialogVisible"
      :title="formTitle"
      width="20%"
      destroy-on-close
      center
      @close="dialogClose">
    <el-form
        ref="ruleFormRef"
        label-position="top"
        label-width="100px"
        :model="formLabelAlign"
        :rules="rules"
    >
      <el-form-item label="用户组名称" prop="groupName">
        <el-input v-model="formLabelAlign.groupName"/>
      </el-form-item>
    </el-form>
    <div class="bottomButton">
      <el-button class="affirm" @click="resetForm" style="width: 47.5%;height: 100%;">确认</el-button>
      <el-button class="cancel" @click="centerDialogVisible=false" style="width: 47.5%;height: 100%;">取消</el-button>

    </div>
  </el-dialog>
</template>
<script>
let me;
export default {
  name: "EditUserGroup",
  data() {
    return {
      formTitle: '新增用户组',
      rules: {
        groupName: [
          {required: true, message: '不能为空', trigger: 'blur'}
        ]
      },
      formLabelAlign: {
        groupName: ''
      },
      centerDialogVisible: false
    }
  },
  methods: {
    showDialog(row) {
      me = this;
      this.centerDialogVisible = true;
      this.$nextTick(() => {
        this.formTitle = '新增用户组';
        if (row) {
          me.formLabelAlign = JSON.parse(JSON.stringify(row));
          this.formTitle = '编辑用户组';
        }
      });
    },
    resetForm() {
      me.$refs.ruleFormRef.validate(async (valid, fields) => {
        if (valid) {
          let params;
          let message;
          if (me.formTitle == '新增用户组') {
            params = {
              actionType: 'userGroupAdd',
              groupName: me.formLabelAlign.groupName
            }
            message = '添加成功';
          } else {
            params = {
              actionType: 'userGroupUpdate',
              groupName: me.formLabelAlign.groupName,
              groupId: me.formLabelAlign.groupId
            }
            message = '修改成功';
          }
          let response = await me.$asyncPost("userGroup", params);
          if (response.success) {
            me.$message.success(message);
            me.$parent.selTableData();
            me.centerDialogVisible = false;
          }
        } else {
          console.log('error submit!', fields)
        }
      })
    },
    dialogClose() {
      this.$refs.ruleFormRef.resetFields();//关闭的时候一定要清空之前的form表单已填写的数据！！！！！
    }
  }
}
</script>
<!--<script setup>
import {ref, defineExpose, reactive, getCurrentInstance} from 'vue'
import {ElMessage} from "element-plus";

const {proxy} = getCurrentInstance();
const emits = defineEmits(["selTableData"]);
const centerDialogVisible = ref(false);
const ruleFormRef = ref();
const rules = reactive({
  name: [
    {required: true, message: '不能为空', trigger: 'blur'},
    {min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur'},
  ],
  region: [
    {
      required: true,
      message: '不能为空',
      trigger: 'change',
    },
  ],
})
const formLabelAlign = reactive({
  data: {
    name: '',
    region: ''
  }
});

function showDialg(row) {
  console.log(row);
  formLabelAlign.data = row;
  centerDialogVisible.value = true;
}

function resetForm() {
  ruleFormRef.value.validate(async (valid, fields) => {
    if (valid) {
      emits("selTableData")
      let response = await proxy.$asyncPost("sysMenu", {actionType: "sysMenuQuery", sysMenuType: 1});
      if (response.success) {
        ElMessage({
          message: '添加成功',
          type: 'success',
        })
        //刷新父级组件
        emits("selTableData")
      }
    } else {
      console.log('error submit!', fields)
    }
  })
}

defineExpose({
  showDialg
});
</script>-->

<style scoped lang="scss">

</style>